const templateCode = `<v-crud
    :table-config="tableConfig"
    :search-bar-config="searchBarConfig"
    :create-and-update-config="createAndUpdateConfig"
  />`

export const RenderUsage = {
  template: `
    <el-card header="使用render函数自定义内容" ref="container">
      ${templateCode}
      <CodeCollapse :codes="[templateCode, scriptCode]" />
    </el-card>
  `,

  data() {
    const tableData = [
      { name: '王小虎', id: 1 },
      { name: '王小虎', id: 2 },
      { name: '王小虎', id: 3 },
      { name: '王小虎', id: 4 }
    ]
    const editDataApi = (data) => {
      console.log(data, 'data');
      return new Promise(r => {
        setTimeout(r, 1000)
      })
    }

    return {
      // 表格配置
      tableConfig: {
        requestApi(query) {
          console.log(query); // 包括页数、条数在内的查询参数
          return new Promise(r => {
            setTimeout(() => {
              r({
                data: tableData,
                count: 4,
                pageSize: 20,
                pages: 1
              })
            }, 800)
          })
        },
        columns: [
          { label: 'ID', prop: 'id' },
          {
            label: '姓名',
            prop: 'name',
            render(h, { value, row }) {
              return h('span', value + '  ' + 'id： ' + row.id)
            }
          },
        ]
      },

      // 搜索栏配置
      searchBarConfig: {
        items: [
          {
            prop: 'value',
            label: '我是使用render创建的输入框',
            render(h, { value, label }, { input }) {
              return h('el-input', {
                attrs: { placeholder: label },
                props: { value },
                style: 'width: 300px',
                class: 'search-bar__item',
                on: { input }
              })
            }
          }
        ]
      },

      // 增加和编辑的配置
      createAndUpdateConfig: {
        items: [
          {
            prop: 'value',
            label: '值',
            render(h, { value }, { input }) {
              return h('el-input', {
                attrs: { placeholder: '我是使用render创建的输入框' },
                props: { value },
                style: 'width: 300px',
                class: 'search-bar__item',
                on: { input }
              })
            }
          }
        ],
        create(data) {
          console.log(data, 'data');
          return editDataApi(data)
        },
      }
    }
  },

  computed: {
    templateCode() {
      return `<template>
  ${templateCode}
</template>`
    },
    scriptCode() {
      const { data } = RenderUsage
      return `<script>
export default {
  ${data.toString()},
}
</script>`
    }
  },
}